<template>
	<div class="driverOrder">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>行程管理</el-breadcrumb-item>
		</el-breadcrumb>

		<el-form :inline="true" :model="tripList" label-width="150px">
			<el-row>
				<el-form-item label="行程编号">
					<el-input v-model="tripList.serialNo" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="线路">
					<el-select v-model="srcCity" placeholder="请选择" class="right-gap" @change="getSrcCityId">
						<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item"></el-option>
					</el-select>
					<span>至</span>
					<el-select v-model="dstCity" placeholder="请选择" class="right-gap" @change="getDstCityId">
						<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="车牌号">
					<el-input v-model="tripList.plateNo" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="服务类型">
					<el-select v-model="orderTypeName" placeholder="请选择" @change="getOrderType">
						<el-option v-for="item in typeList" :key="item.value" :label="item.text" :value="item"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="工作手机">
					<el-input v-model="tripList.carPhone" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="行程状态">
					<el-select v-model="statusName" placeholder="请选择">
						<el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="司机姓名">
					<el-input v-model="tripList.driverName" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="结束行程时间">
					<el-date-picker v-model="startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
					<span>至</span>
					<el-date-picker v-model="endTime" type="datetime" placeholder="选择开始时间" :picker-options="endDateOptions"></el-date-picker>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="司机账号">
					<el-input v-model="tripList.driverPhone" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="代理公司">
					<el-select v-model="companyName" placeholder="请选择" @change="getCompanyId">
						<el-option v-for="item in copyList" :key="item.id" :label="item.name" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label=" ">
					<el-button type="primary" icon="setting" @click="search()">查询</el-button>
					<el-button type="danger" @click="reset()">重置</el-button>
				</el-form-item>
			</el-row>
		</el-form>
		<el-table :data="tripData" :row-key="getRowKeys" :expand-row-keys="expands" stripe border style="width: 100%">
			<!--<el-table-column prop="seriralNo" label="行程编号" width="200"></el-table-column>
			<el-table-column prop="orderType" label="服务类型" width="120">
				<template scope="scope">
					{{getCarType(scope.row.orderType)}}
				</template>
			</el-table-column>
			<el-table-column prop="plateNo" label="车牌号" width="120"></el-table-column>
			<el-table-column prop="carPhone" label="工作手机" width="120"></el-table-column>
			<el-table-column prop="carType" label="车型" width="120"></el-table-column>
			<el-table-column prop="companyName" label="租赁公司" width="120"></el-table-column>
			<el-table-column prop="srcCity" label="出发城市" width="120"></el-table-column>
			<el-table-column prop="dstCity" label="目的城市" width="120"></el-table-column>
			<el-table-column prop="passengerCount" label="乘车人数" width="120"></el-table-column>
			<el-table-column prop="orderEndLower" label="开始时间" width="200">
				<template scope="scope">
					{{api.dateFormat(scope.row.orderStart, "yyyy-MM-dd hh:mm:ss")}}
				</template>
			</el-table-column>
			<el-table-column prop="orderEndUpper" label="结束时间" width="200">
				<template scope="scope">
					{{api.dateFormat(scope.row.orderEnd, "yyyy-MM-dd hh:mm:ss")}}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="120">
				<template scope="scope">
					{{getStatusType(scope.row.status)}}
				</template>
			</el-table-column>
			<el-table-column prop="amount" label="金额" width="120"></el-table-column>
			<el-table-column prop="driverName" label="司机姓名" width="120"></el-table-column>
			<el-table-column prop="driverPhone" label="司机账号" width="200"></el-table-column>
			<el-table-column prop="name" label="乘客订单" width="120">
				<template scope="scope">
					<el-button type="primary" @click="order(scope.row)" size="small">乘客订单</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="操作日志" width="120">
				<template scope="scope">
					<el-button type="primary" @click="log(scope.row)" size="small">操作日志</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="异常行程备注" width="120">
				<template scope="scope">
					<!--{{getRemark(scope.row.remarks)}}
					<el-button type="primary" @click="remark(scope.row)" size="small">行程备注</el-button>
				</template>
			</el-table-column>-->
			<el-table-column type="expand">
				<template scope="props">
					<el-form label-position="left" inline class="left table-expand">
						<el-form-item label="乘客订单编号" class="w30">
							<span>{{ props.row.seriralNo }}</span>
						</el-form-item>
						<el-form-item label="行程开始时间" class="w30">
							<span>{{api.dateFormat(props.row.orderStart, "yyyy-MM-dd hh:mm:ss")}}</span>
						</el-form-item>
						<el-form-item label="行程结束时间" class="w30">
							<span>{{api.dateFormat(props.row.orderEnd, "yyyy-MM-dd hh:mm:ss")}}</span>
						</el-form-item>
						<el-form-item label="司机姓名" class="w30">
							<span>{{ props.row.driverName }}</span>
						</el-form-item>
						<el-form-item label="司机账号" class="w30">
							<span>{{ props.row.driverPhone }}</span>
						</el-form-item>
						<el-form-item label="工作手机" class="w30">
							<span>{{ props.row.carPhone }}</span>
						</el-form-item>
						<el-form-item label="车型" class="w30">
							<span>{{ props.row.carType }}</span>
						</el-form-item>
						<el-form-item label="代理公司" class="w30">
							<span>{{ props.row.companyName }}</span>
						</el-form-item>
					</el-form>
					<el-form class='right'>
						<el-button type="primary" @click="order(scope.row)">乘客订单</el-button><br />
						<el-button type="primary" @click="log(scope.row)">操作日志</el-button><br />
						<el-button type="primary" @click="remark(scope.row)">行程备注</el-button>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="行程编号" prop="seriralNo" width="180"></el-table-column>
			<el-table-column label="服务类型" prop="orderType" width="120">
				<template scope="scope">
					{{getCarType(scope.row.orderType)}}
				</template>
			</el-table-column>
			<el-table-column label="出发城市" prop="srcCity" width="120"></el-table-column>
			<el-table-column label="目的城市" prop="dstCity" width="120"></el-table-column>
			<el-table-column label="订单状态" prop="status" width="120">
				<template scope="scope">
					{{getStatusType(scope.row.status)}}
				</template>
			</el-table-column>
			<el-table-column label="车牌号" prop="plateNo" width="120"></el-table-column>
			<el-table-column label="乘车人数" prop="passengerCount" width="120"></el-table-column>
			<el-table-column label="异常行程备注" prop="remarks" width="240">
				<template scope="scope">
					{{getRemark(scope.row.remarks)}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class='pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="cityParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="cityParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>

		<el-dialog v-model="isOrder" :close-on-click-modal="false" class="order-dialog">
			<el-table :data="orderData" stripe border style="width: 100%">
				<el-table-column prop="serialNo" label="乘客订单编号" width="190"></el-table-column>
				<el-table-column prop="userPhone" label="乘车人电话" width="140"></el-table-column>
				<el-table-column prop="srcCity" label="出发地"></el-table-column>
				<el-table-column prop="dstCity" label="目的地"></el-table-column>
				<el-table-column prop="mileage" label="行程距离"></el-table-column>
				<el-table-column prop="passengerCount" label="乘车人数"></el-table-column>
				<el-table-column prop="status" label="订单状态">
					<template scope="scope">
						{{getPayType(scope.row.status)}}
					</template>
				</el-table-column>
				<el-table-column prop="priceWithoutCoupon" label="支付金额"></el-table-column>
				<el-table-column prop="totalPrice" label="订单金额"></el-table-column>
				<el-table-column prop="refundAmount" label="优惠金额"></el-table-column>
				<el-table-column prop="confirmOnboard" label="确认上车时间" width="200">
					<template scope="scope">
						{{api.dateFormat(scope.row.confirmOnboard,"yyyy-MM-dd hh:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="rating" label="服务评分"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="close">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="isLog" :close-on-click-modal="false">
			<el-table :data="logData" stripe border style="width: 100%;max-height: 800px;overflow: auto;">
				<el-table-column prop="managementUserName" label="操作内容"></el-table-column>
				<el-table-column prop="time" label="操作时间">
					<template scope="scope">
						{{api.dateFormat(scope.row.time,"yyyy-MM-dd hh:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="操作账号"></el-table-column>
				<el-table-column prop="strField1" label="账号名称"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="close">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog v-model="isRemark" :close-on-click-modal="false">
			<p>{{remarkData.serialNo}} <span>异常行程备注记录</span></p>
			<!--<el-table :data="remarkData" stripe border style="width: 100%;">-->
			<!--<el-table-column prop="managementUserName" label="备注内容"></el-table-column>
				<el-table-column prop="time" label="备注时间">
					<template scope="scope">
						{{api.dateFormat(scope.row.time,"yyyy-MM-dd hh:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="操作账号"></el-table-column>
				<el-table-column prop="strField1" label="账号名称"></el-table-column>-->
			<!--</el-table>-->
			<div class="el-table el-table--striped el-table--border">
				<table width="100%" cellspacing="0" cellpadding="0" border="0" class="el-table__body" id="table">
					<thead>
						<tr>
							<th class="is-leaf">
								<div class="cell">
									备注详情
								</div>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in remarkData" :id="index">
							<td>
								<div class="cell">
									<span>{{item}}</span>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<input type="textarea" v-model="remarkContent" class="orderTextArea" placeholder="备注" />
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="close">取 消</el-button>
				<el-button type="primary" @click.native="addRemark">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "tripOrder",
		data() {
			return {
				srcCity: "",
				dstCity: "",
				orderTypeName: "",
				statusName: "",
				companyName: "",
				startTime: "",
				endTime: "",
				tripList: {
					serialNo: "",
					srcCityId: "",
					dstCityId: "",
					plateNo: "",
					carPhone: "",
					status: "",
					companyId: "",
					orderType: "",
					driverName: "",
					driverPhone: "",
					orderEndLower: "",
					orderEndUpper: ""
				},
				cityList: [],
				typeList: [{
					text: "普通拼车",
					value: "COMMON_SHARE_CAR"
				}, {
					text: "普通包车",
					value: "COMMON_CHARTERED_CAR"
				}, {
					text: "扫码拼车",
					value: "QRCODE_SHARE_CAR"
				}, {
					text: "电话拼车",
					value: "PHONE_SHARE_CAR"
				}, {
					text: "电话包车",
					value: "PHONE_CHARTERED_CAR"
				}, {
					text: "携程订单",
					value: "CTRIP_SHARE_CAR"
				}],
				statusList: [{
					text: "拉单中",
					value: "READY"
				}, {
					text: "已开始",
					value: "STARTED"
				}, {
					text: "已结束",
					value: "FINISHED"
				}, {
					text: "取消",
					value: "CANCELD"
				}, {
					text: "过期",
					value: "OBSOLETED"
				}],
				payStatus: [{
					text: "未支付",
					value: "UNPAY"
				}, {
					text: "未支付",
					value: "PREPAYED"
				}, {
					text: "已支付",
					value: "UN_TAKEN"
				}, {
					text: "已派单",
					value: "TAKEN"
				}, {
					text: "已取消",
					value: "CANCEL"
				}, {
					text: "已开始",
					value: "STARTED"
				}, {
					text: "已完成",
					value: "FINISHED"
				}, {
					text: "已评分",
					value: "RATED"
				}, {
					text: "已废弃",
					value: "OBSOLETED"
				}, {
					text: "退款中",
					value: "NEED_REFUND"
				}, {
					text: "退款中",
					value: "REFUNDING"
				}, {
					text: "已退款",
					value: "REFUNDED"
				}, {
					text: "已关闭",
					value: "MANUALCLOSED"
				}, {
					text: "已支付并司机等候中",
					value: "DRIVER_WAITING_START,"
				}, {
					text: "未支付并已等候",
					value: "WAITED_UNPAY"
				}, {
					text: "预支付并已等候",
					value: "WAITED_PREPAY"
				}, {
					text: "确认上车",
					value: "CONFIRM_ONBOARD"
				}],
				copyList: [],
				isOrder: false,
				isLog: false,
				isRemark: false,

				tripData: [],

				cityParams: {
					pageNum: 1,
					pageSize: 10
				},
				count: 1,
				logData: [],
				orderData: [],

				remarkData: {},
				remarkContent: "",
				orderId: "",

				// 获取row的key值
				getRowKeys(row) {
					return row.seriralNo;
				},
				// 要展开的行，数值的元素是row的key值
				expands: []
			}
		},
		computed: {
			dateOptions: function() {
				return {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				}
			},
			endDateOptions: function() {
				var _this = this;
				return {
					disabledDate(time) {
						return time.getTime() < new Date(_this.tripList.startTime).getTime() - 8.64e7;
					}
				}
			}
		},
		methods: {
			order(row) {
				var _this = this;
				// console.log(row);
				this.$http.get("/getOrderInfo.shtml", {
					params: {
						orderId: row.orderId
					}
				}).then(result => {
					if(result.code == 200) {
						_this.isOrder = true;
						_this.orderData = result.data;
					}
				});
			},
			log(row) {
				var _this = this;
				// console.log(row);
				this.$http.get("/getOrderLogs.shtml", {
					params: {
						orderId: row.orderId
					}
				}).then(result => {
					if(result.code == 200) {
						_this.isLog = true;
						_this.logData = result.data;
					}
				});
			},
			remark(row) {
				var _this = this;
				this.orderId = row.orderId;
				// console.log(row);
				this.$http.get("/getOrderReamrk.shtml", {
					params: {
						orderId: row.orderId
					}
				}).then(result => {
					if(result.code == 200) {
						_this.isRemark = true;
						_this.remarkData = result.data;
					}
				});
			},
			addRemark() {
				var _this = this,
					data = "param=" + JSON.stringify({
						orderId: this.orderId,
						remark: this.remarkContent
					});
				// console.log(row);
				this.$http.post("/addOrderReamrk.shtml", data).then(result => {
					if(result.code == 200) {
						_this.$notify({
							title: '成功',
							message: '添加成功',
							type: 'success'
						});
						_this.isRemark = false;
						_this.remarkContent = ""
					}
				});
			},
			close() {
				this.isLog = false;
				this.isOrder = false;
				this.isRemark = false;
			},
			getCityList() {
				var _this = this;
				// 城市列表
				this.$http.post("/cityList.shtml", "value=" + JSON.stringify({
					name: "",
					pageNum: 1,
					pageSize: 1000
				})).then((result) => {
					if(result.code == 200) {
						_this.cityList = result.data;
					}
				})
			},
			getTripList() {
				var _this = this;
				this.tripList.orderEndLower = new Date(_this.startTime).getTime();
				this.tripList.orderEndUpper = new Date(_this.endTime).getTime();
				var data = "param=" + JSON.stringify({
					pageNum: _this.cityParams.pageNum,
					pageSize: _this.cityParams.pageSize,
					param: _this.tripList
				});
				this.$http.post("/tripSearch.shtml", data).then(result => {
					if(result.code == 200) {
						_this.tripData = result.data;
						_this.count = result.appendix;
						// 初始化展开行
						for(var i = 0, len = _this.tripData.length; i < len; i++) {
							_this.expands.push(_this.tripData[i].seriralNo);
						}
					}
				})
			},
			search() {
				this.getTripList();
			},
			reset() {
				this.tripList.seriralNo = "";
			},
			// 代理公司列表
			getCopyList() {
				var _this = this,
					data = "param=" + JSON.stringify({
						companyId: "",
						pageSize: 9999999,
						pageNum: 1
					});
				this.$http.post("/validComanyList.shtml", data).then(result => {
					if(result.code == 200) {
						_this.copyList = result.data;
					}
				})
			},
			// 分页切换
			handleSizeChange(val) {
				this.cityParams.pageSize = val;
				this.getTripList();
			},
			handleCurrentChange(val) {
				this.cityParams.pageNum = val;
				this.getTripList();
			},
			// 输出服务类型
			getCarType(type) {
				var _this = this,
					carType;
				for(var key in _this.typeList) {
					if(type == _this.typeList[key].value) {
						carType = _this.typeList[key].text;
						break;
					} else {
						continue;
					}
				}
				return carType;
			},
			// 输出订单状态
			getStatusType(type) {
				var _this = this,
					status;
				for(var key in _this.statusList) {
					if(type == _this.statusList[key].value) {
						status = _this.statusList[key].text;
						break;
					} else {
						continue;
					}
				}
				return status;
			},
			// 输出订单状态
			getPayType(type) {
				var _this = this,
					status;
				for(var key in _this.payStatus) {
					if(type == _this.payStatus[key].value) {
						status = _this.payStatus[key].text;
						break;
					} else {
						continue;
					}
				}
				return status;
			},
			getRemark(remak) {
				return remak[0];
			},
			getSrcCityId(row) {
				this.tripList.srcCityId = row.id;
			},
			getDstCityId(row) {
				this.tripList.dstCityId = row.id;
			},
			getOrderType(row) {
				this.tripList.orderType = row.value;
			},
			getCompanyId(row) {
				this.tripList.companyId = row.value;
			},
			changeOrderEdit(row) {
				console.log(row);
			}
		},
		created() {
			this.getCityList();
			this.getTripList();
			this.getCopyList();
		}
	}
</script>
<style scoped>
	.order-dialog .el-dialog {
		width: 1500px;
	}
	
	.orderTextArea {
		width: 100%;
		height: 100px;
		margin: 15px 0;
		border: 1px solid #DCDCDC;
		border-radius: 3px;
		line-height: 1.4;
	}
	
	.table-expand {
		font-size: 0;
	}
	
	.table-expand .w30 {
		width: 30%;
	}
	
	.left {
		width: 80%;
		float: left;
	}
	
	.right {
		width: 20%;
		float: right;
	}
</style>